<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { ref } from 'vue';

import { Page, useVbenDrawer } from '@vben/common-ui';

import { Button } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteLife, queryLifeList } from '#/api';
import utils from '#/utils';
import DetailExtraDrawer from './DetailDrawer.vue';
import InsertExtraDrawer from './Drawer.vue';

interface RowType {
  category: string;
  color: string;
  id: string;
  price: string;
  productName: string;
  releaseDate: string;
}

const formOptions: VbenFormProps = {
  // 默认展开
  schema: [
    {
      component: 'DatePicker',
      fieldName: 'date',
      componentProps: {
        picker: 'date',
        placeholder: '请选择日期',
        valueFormat: 'YYYY-MM-DD',
      },
      label: '日期',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: false,
  submitButtonOptions: {
    content: '查询',
  },
  // 是否在字段值改变时提交表单
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};
const pageTotal = ref(0);
const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { title: '日期', field: 'date', slots: { default: 'date' } },
    { title: '标题', field: 'title' },
    { title: '地点', field: 'location' },
    { title: '人物', field: 'people' },
    { title: '分类', field: 'categories' },
    {
      field: 'action',
      fixed: 'right',
      slots: { default: 'action' },
      title: '操作',
      width: 150,
    },
  ],

  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        const data = await queryLifeList({
          page: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
        pageTotal.value = data.total;
        return data;
      },
    },
  },
  pagerConfig: {
    pageSize: 10,
  },
  toolbarConfig: {
    // 是否显示搜索表单控制按钮
    // @ts-ignore 正式环境时有完整的类型声明
    search: true,
    custom: true,
    export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
function deleteLifeRow(id) {
  deleteLife(id).then(() => {
    gridApi.reload();
  });
}

const [InsertDrawer, insertDrawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: InsertExtraDrawer,
  onOpenChange(isOpen) {
    if (!isOpen) {
      gridApi.reload();
    }
  },
});

const [DetailDrawer, detailDrawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: DetailExtraDrawer,
  onOpenChange(isOpen) {
    if (!isOpen) {
      gridApi.reload();
    }
  },
});

function editRow(row) {
  insertDrawerApi
    .setData({ isEdit: true, ...row, date: utils.formatDate(row.date) })
    .open();
}
function toDetail({ content, title }) {
  detailDrawerApi.setData({ content, title }).open();
}
</script>

<template>
  <Page description="日常记录" title="生活">
    <div class="vp-raw w-full">
      <Grid>
        <template #toolbar-tools>
          <Button
            class="mr-2"
            type="primary"
            @click="insertDrawerApi.setData({ isEdit: false }).open()"
          >
            新增
          </Button>
        </template>
        <template #action="{ row }">
          <Button type="link" @click="editRow(row)">编辑</Button>
          <Button
            danger
            type="link"
            @click="deleteLifeRow(row.id)"
            :disabled="row.rank !== pageTotal"
          >
            删除
          </Button>
        </template>
        <template #date="{ row }">
          <Button type="link" @click="toDetail(row)">
            {{ utils.formatDate(row.date) }}
          </Button>
        </template>
      </Grid>
    </div>
    <InsertDrawer />
    <DetailDrawer />
  </Page>
</template>
